<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'

const state = reactive({ 
	headquartersPowerList: ['首页','商品管理','库存管理','人事管理','个人中心','系统设置','卡项管理','品牌管理','商品列表','新增商品','商品规格','质保管理'],
	storePowerList: ['首页','支出管理','订单管理','会员管理','退款申请','会员停卡','会员统计','补录管理','库存管理','库存查询','商品进货'],
	sendPeple: '',
	phone: '',
	remark: '',
	methods: 1,
    tableData: [
		{
			id: 1, 
			job: '大螺丝',
			six: '女',
			money: '22',
			
		}
	] as Array<any>,
    rowId: 0
})
const innerVisible = ref(false)

// const props = withDefaults(defineProps<{
//     id: number,
//     modelValue: boolean,
//     statistics: number
// 	status: number
// }>(), {
//     statistics: 1,
// 	title: '',
// 	status: 1
// })

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

const previewInfo = (row: any) => {
    state.rowId = row.id 
	innerVisible.value = true
}


</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" title="岗位详情" @close="closeDialog" style="width: 800px;" center>
            <section>
				<section class="mb10">
					<h3>基本信息</h3> 
				</section> 
				<section class="mb20"> 
					<el-table :data="state.tableData" style="width: 100%" border> 
						<el-table-column label="岗位名称" prop="job" />
						<el-table-column label="底薪(元)" prop="money" />
						<el-table-column label="销售提成(%)" prop="orderPrice" />
					</el-table>
					<el-table :data="state.tableData" style="width: 100%" border class="mt20"> 
						<el-table-column label="服务手工(元)" prop="job" />
						<el-table-column label="消耗提成(%)" prop="money" />
						<el-table-column label="上级岗位" prop="orderPrice" />
					</el-table>
				</section>
				<section class="mb20">
					<h3 class="mb10">权限信息</h3>
					<section class="power-list">
						<h4>总部权限</h4>
						<section class="power-item-list">
							<span class="power-item" v-for="(p, i) of state.headquartersPowerList" :key="i">{{ p }}</span>
						</section>

						<h4>门店权限</h4>
						<section class="power-item-list">
							<span class="power-item" v-for="(p, i) of state.storePowerList" :key="i">{{ p }}</span>
						</section>
					</section> 
				</section>
				
				<section class="mb10">
					<h3>目标信息</h3> 
				</section> 
				<section class="mb20"> 
					<el-table :data="state.tableData" style="width: 100%" border> 
						<el-table-column label="综合业绩目标(元)" prop="job" />
						<el-table-column label="销售目标(元)" prop="money" />
						<el-table-column label="充值目标(元)" prop="orderPrice" />
					</el-table>
					<el-table :data="state.tableData" style="width: 100%" border class="mt20"> 
						<el-table-column label="消耗目标(元)" prop="job" />
						<el-table-column label="手工目标(个)" prop="money" />
						<el-table-column label="新客目标(人)" prop="orderPrice" />
					</el-table>
				</section>
			</section>
        </el-dialog>
    </main>
</template>

<style lang='scss' scoped>
.power-list{
	border: 1px solid #ededed;
	
	h4{
		background-color: #f5f5f5;
		font-size: 16px;
		padding: 12px 10px;
		color: #999;
	}
	.power-item-list{
		display: flex;
		flex-wrap: wrap;
		padding  : 0 0 12px 12px;
	}
	.power-item{
		padding: 6px;
		border: 1px solid #ededed;
		margin: 12px 12px 0 0 ;
		margin-bottom: 0;
		color: #888;
		border-radius: 4px;
	}
}
</style>